<template>
    <div class="home" v-loading="loading" element-loading-text="拼命加载中啊！" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 1)">
        <el-container>
            <el-header>
                <div class="head-left">
                    <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                        <el-avatar :src="imgurl" :size="50"></el-avatar>
                        <div style="display: inline-block; text-align: center; margin-left: 10%; font-size: 25px;">
                            <span>共享单车管理系统</span>
                        </div>
                    </div>
                </div>
                <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#464C5B" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">租借记录</el-menu-item>
                    <el-menu-item index="3">充值中心</el-menu-item>
                    <el-menu-item index="4">个人中心</el-menu-item>
                </el-menu>
                <div class="head-right">
                    <div @click="logout"
                        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                        <span>退出登录</span>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-main>
                    <userHome v-if="keys == 1" @addTodo="addTodo" @usermoney="usermoney" @deletevip="deletevip">
                    </userHome>
                    <leaseRecords v-if="keys == 2" @recordmoney='recordmoney' @userpay="userpay"></leaseRecords>
                    <rechargeMoney v-if="keys == 3" @paymoney="paymoney" @vipshow="vipshow" @uservip="uservip">
                    </rechargeMoney>
                    <userCenter v-if="keys == 4" @userinfo="userinfo"></userCenter>
                </el-main>
                <el-aside>
                    <div class="left-top">
                        <div>
                            <span>下午好! &nbsp; {{name}}</span>
                        </div>
                        <div>
                            <div style="display: inline-block;margin-left: 2%;">
                                <el-avatar v-if="photo" :src="photo" :size="130"></el-avatar>
                                <el-avatar v-if="photo==null" :src="imageUrl" :size="130"></el-avatar>
                            </div>
                            <div style="display: inline-block;width: 37%;height: 80%;float: right;">
                                <div class="date" style="margin: 20% 0 10% 2%;">
                                    <span>{{timeData.m}}</span>
                                </div>
                                <div class="week" style="margin: 10% 0 10% 12%;">{{timeData.week}}</div>
                                <div class="time" style="">
                                    <!-- margin: 0 0 5% 5%; -->
                                    <span>{{timeData.year}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left-buttom">
                        <div
                            style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);  background-color: #ee0a2485;border-radius: 10px; ">
                            <!-- <div class="notice"> <span style="line-height:40px ;">重要通知</span> </div> -->
                            <!-- <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span> -->
                            <el-divider> <span style="color: #fff;font-size: 16px;">重要通知</span>
                            </el-divider>
                            <div v-if="noticeflag" style="height: 75%;text-align: center;color: #fff;font-size: 20px;">
                                <span style="line-height: 150px;">暂无通知</span>
                            </div>
                            <div v-if="!noticeflag"
                                style="overflow:auto;height: 80%;text-align: center;margin-top: 9%;color: #fff;">
                                <span v-if="infoflag">个人信息请填写完整</span>
                                <el-divider v-if="infoflag"></el-divider>
                                <span v-if="notpayflag">您有未支付的骑行记录</span>
                                <el-divider v-if="notpayflag"></el-divider>
                                <span v-if="vipflag">您的会员即将到期</span>
                                <el-divider v-if="vipflag"></el-divider>
                            </div>
                        </div>
                        <div
                            style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);  background-color: #00D96C;border-radius: 10px; margin-bottom: 4%; ">
                            <div class="money">
                                <img src="../../assets/moneylogo.jpg" alt="" width="40" height="40"
                                    style="border-radius: 20px;">
                                <div style="font-size: 20px; margin:2% 2% 2% 5%; color: #fff;">余额</div>
                                <div> <span style="font-size: 20px;color: #fff;">￥</span> <span
                                        style="font-size: 25px; color: #fff;">{{(money == '' || money ==null) ? 0 :
                                        money}}</span>
                                </div>
                            </div>
                        </div>
                        <div
                            style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);  background-color: #fff;border-radius: 10px;margin-bottom: 4%;">
                            <div class="money">
                                <img src="../../assets/vip.png" alt="" width="40" height="40"
                                    style="border-radius: 20px;">
                                <div style="font-size: 20px; margin:2% 5% ;color: #FEC423;">vip</div>
                                <div>
                                    <el-button v-if="flag" type="text" size="small"
                                        style="font-size: 15px; color: #9C9C9C;">未开通</el-button>
                                    <div v-if="!flag" style="width: 152px;">
                                        <span style="font-size: 16px;margin:0 0 0 1%; color: #FF8040;">有效期至
                                            {{vipEndTime}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </el-aside>

            </el-container>
        </el-container>
    </div>
</template>
<script>
    import store from '@/store' // 引入store对象
    import { mapGetters } from 'vuex'
    import { myInformationAPI, getvipIdAPI, updateonlineAPI, usersinofAPI, userspayAPI, usersvipAPI } from "@/api";
    import userHome from '@/views/user/userHome.vue'
    import leaseRecords from '@/views/user/leaseRecords.vue'
    import rechargeMoney from '@/views/user/rechargeMoney.vue'
    import userCenter from '@/views/user/userCenter.vue'
    export default {
        components: { userHome, leaseRecords, rechargeMoney, userCenter },
        computed: {
            ...mapGetters(['name', 'username', 'photo', 'money'])
        },
        data() {
            return {
                getId:'',
                users: {
                    id: '',
                    info: 0,
                    notpay: 0,
                    notvip: 0
                },
                vipflag: false,
                notpayflag: false,
                infoflag: false,
                onlineData: {
                    id: '',
                    online: 2
                },
                imageUrl: require('../../assets/ren.jpg'),
                vipEndTime: '',
                loading: true,
                noticeflag: true,
                flag: true,
                keys: '1',
                timeData: {
                    year: '',
                    week: '',
                    m: '',
                },
                timer: "", //定义一个定时器
                imgurl: require('../../assets/bicklogo.webp'),
                personImgUrl: require('../../assets/p1.jpg'),
                times: ''
            }
        },
        created() {
            store.dispatch('initUserInfo')
            this.init()
            this.getTime()
            // this.getvipId()
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
            if (this.times) {
                clearInterval(this.times);
            }
        },
        methods: {
            async init() {
                const { data: res } = await myInformationAPI()
                console.log(res)
                if (res.status == 0) {
                    this.getId = res.data.id
                    this.getvipId()
                    if (res.data.info == 1) {
                        this.infoflag = true
                        this.noticeflag = false
                    }
                    else if (res.data.notpay == 1) {
                        this.notpayflag = true
                        this.noticeflag = false
                    } else if (res.data.notvip == 1) {
                        this.vipflag = true
                        this.noticeflag = false
                        console.log(111111)
                    }
                }
            },
            async updateonline() {
                this.onlineData.id = this.$store.state.userInfo.id
                const { data: res } = await updateonlineAPI(this.onlineData)
                if (res.status == 0) {
                    // TODO：执行退出登录的操作
                    // 1. 清空 token
                    this.$store.commit('updateToken', '')
                    this.$store.commit('updateUserInfo', {})
                    // 2. 跳转到登录页面
                    this.$router.push('/login')
                }
            },
            //根据用户id获取会员信息
            async getvipId() {
                const { data: res } = await getvipIdAPI(this.getId)
                if (res.status == 0) {
                    this.flag = false
                    this.vipEndTime = res.data.memberEndTime.split(' ')[0]
                } else {
                    this.flag = true
                }
            },
            logout() {
                // 询问用户是否退出登录
                this.$confirm('您确认退出登录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        this.updateonline()
                    })
                    .catch((err) => err)
            },
            //父亲接收到参数并执行
            uservip(value) {  //
                this.showusersvip()
                this.notpayflag = false
                this.noticeflag = true
            },
            async showusersvip() {
                this.users.id = this.$store.state.userInfo.id
                const { data: res } = await usersvipAPI(this.users);
                if (res.status == 0) {
                }
                console.log(res)
            },
            //父亲接收到参数并执行
            userpay(value) {  //
                this.showuserspay()
                this.notpayflag = false
                this.noticeflag = true
            },
            async showuserspay() {
                this.users.id = this.$store.state.userInfo.id
                const { data: res } = await userspayAPI(this.users);
                if (res.status == 0) {
                }
                console.log(res)
            },
            //父亲接收到参数并执行
            userinfo(value) {  //
                this.showusers()
                this.infoflag = false
                this.noticeflag = true
            },
            async showusers() {
                this.users.id = this.$store.state.userInfo.id
                const { data: res } = await usersinofAPI(this.users);
                if (res.status == 0) {
                }
            },
            //父亲接收到参数并执行
            deletevip(value) {  //
                this.getvipId()
            },
            //父亲接收到参数并执行
            vipshow(value) {  //
                this.getvipId()
            },
            //父亲接收到参数并执行
            usermoney(value) {  //金额返回
                let times = setTimeout(() => {
                    store.dispatch('initUserInfo')
                }, 1000)
            },
            //父亲接收到参数并执行
            paymoney(value) {  //金额返回
                store.dispatch('initUserInfo')
            },
            recordmoney(value) {  //
                let times = setTimeout(() => {
                    store.dispatch('initUserInfo')
                }, 1000)
            },
            addTodo(todoObj) {   //加载动画结束
                this.loading = todoObj
            },
            vip() {
                this.flag = false
            },
            handleSelect(key, keyPath) {
                this.keys = key
            },
            getTime() {
                this.timer = setInterval(() => {
                    let timeDate = new Date();
                    let year = timeDate.getFullYear();
                    let mounth = timeDate.getMonth() + 1;
                    let day = timeDate.getDate();
                    let hours = timeDate.getHours();
                    hours = hours >= 10 ? hours : "0" + hours;
                    let minutes = timeDate.getMinutes();
                    minutes = minutes >= 10 ? minutes : "0" + minutes;
                    let seconds = timeDate.getSeconds();
                    seconds = seconds >= 10 ? seconds : "0" + seconds;
                    let week = timeDate.getDay();
                    let weekArr = [
                        "星期日",
                        "星期一",
                        "星期二",
                        "星期三",
                        "星期四",
                        "星期五",
                        "星期六",
                    ];
                    this.timeData.year = `${year}/${mounth}/${day}`
                    this.timeData.week = `${weekArr[week]}`
                    this.timeData.m = `${hours}:${minutes}:${seconds}`
                }, 1000);
            },
        },
    }
</script>
<style scoped>
    .el-divider {
        background-color: rgb(0 0 0 / 10%);
        position: relative;
    }

    .el-divider__text {
        position: absolute;
        border-radius: 20px;
        background-color: #e91329a3;
        padding: 5px 40px;
        font-weight: 500;
        color: rgb(244, 10, 10);
    }

    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 15px 0 !important;
    }

    .notice {
        width: 100%;
        height: 20%;
        background-color: #FF0000;
        color: #fff;
        border-radius: 10px;
        text-align: center;
    }

    .money {
        width: 100%;
        height: 100%;
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-menu-demo {
        margin-left: 2%;
        height: 100%;
        width: 24.16%;
        display: inline-block;
        top: -7px
    }

    .left-buttom>div:nth-child(1) {
        padding: 5% 3% 0 3%;
        height: 51%;
        width: 94%;
        display: inline-block;
        margin-bottom: 4%;
    }

    .left-buttom>div:nth-child(2) {
        padding: 7% 6% 5% 4%;
        height: 10%;
        width: 90%;
        display: inline-block;
    }

    .left-buttom>div:nth-child(3) {
        padding: 7% 6% 5% 4%;
        height: 10%;
        width: 90%;
        display: inline-block;
    }

    .left-top>div:nth-child(2) {
        width: 90%;
        height: 70%;
        margin: 4% 0 0 7%;
    }

    .left-top>div:nth-child(1) {
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        width: 60%;
        height: 20%;
    }

    .left-top {
        width: 100%;
        height: 35%;
        margin-bottom: 4%;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        background-color: rgb(62, 186, 186);

    }

    .left-buttom {
        background-color: #F6F7F9;
        width: 100%;
        height: 63%;
    }

    .head-left {
        height: 100%;
        width: 20%;
        display: inline-block;
    }

    .head-right {
        height: 100%;
        width: 5%;
        display: inline-block;
        float: right;
        cursor: pointer;
    }

    .head-right:hover {
        color: aqua;
    }

    .home {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .el-container {
        height: 100%;
    }

    .el-header {
        height: 8% !important;
        padding: 0.3% 2% 0.3% 2% !important;
        background-color: #464C5B;
        color: #fff;
    }

    .el-aside {
        padding: 1%;
        height: 100%;
        width: 22% !important;
        /* background-color: #fff; */
        background-color: #F6F7F9;
        color: #333;
    }

    .el-main {
        height: 100%;
        width: 70% !important;
        background-color: #F6F7F9;
        padding: 1% 0 1% 1% !important;
    }
</style>